<template>
  <div class="app-container">
    <div v-show="showSearch" class="search-container">
      <el-form ref="queryParamsRef" :inline="true" :model="queryParams"
               label-width="80px">
        <el-form-item label="库存单位" prop="storageId">
          <drug-storage-info ref="storageIdDeptRef" :clearable="false"
                             :org-id="queryParams.orgId"
                             :value="queryParams.storageId" :value-storage-id="queryParams.storageId"
                             class="import-master width-120 "
                             @drugStorageChange="storageIdClick"/>
        </el-form-item>
        <el-form-item label="药品名称" prop="drugName">
          <el-input v-model="queryParams.drugName" clearable placeholder="请输入药品名称"
                    @keyup.enter.native="handleQuery"/>
        </el-form-item>
        <div class="mr20" style="float: right">
          <query-form-button @handleQuery="handleQuery" @resetQuery="resetQuery"/>
        </div>
      </el-form>
    </div>
    <el-table v-adaptive="adaptiveHeight" :border="true" :data="stockList" :header-cell-style="$headerCellStyle"
              :stripe="true"
              highlight-current-row>
      <el-table-column :align="'center'" :show-overflow-tooltip="true" fixed="left" label="库房" prop="storageName"
                       width="100"/>
      <el-table-column :align="'left'" :show-overflow-tooltip="true" fixed="left" header-align="center" label="药品名称"
                       min-width="140" prop="drugName">
        <template #default="scope">
          <span class="fz14 fw-bold">{{ scope.row.drugName }}</span>
        </template>
      </el-table-column>
      <el-table-column :align="'left'" :show-overflow-tooltip="true" fixed="left" label="生产商" prop="firmName"/>
      <el-table-column :align="'right'" :show-overflow-tooltip="true" label="包装规格" prop="packageSpec"
                       width="160px"/>
      <el-table-column :align="'center'" :show-overflow-tooltip="true" label="库存量" prop="minUnits"
                       width="150px">
        <template #default="scope">
          <template v-if="scope.row.quantityMin > 0">
            <!--小包装-->
            <dict-data-tag :options="dictDataMap['spec_unit']" :value="scope.row.minUnits"
                           style="float: right"/>
            <div style="float: right;margin-right: 5px;font-weight: bold;">
              {{ scope.row.quantityMin }}
            </div>
          </template>
          <!--大包装-->
          <template v-if="scope.row.quantityMax > 0">
            <dict-data-tag :options="dictDataMap['spec_unit']" :value="scope.row.packageUnits"
                           style="float: right"/>
            <div style="float: right;margin-right: 5px;font-weight: bold;">{{ scope.row.quantityMax }}
            </div>
          </template>
        </template>
      </el-table-column>
      <el-table-column :align="'left'" :header-align="'center'" :show-overflow-tooltip="true" label="批号"
                       prop="batchNo" width="120"/>
      <el-table-column :align="'center'" :show-overflow-tooltip="true" label="货位" prop="location" width="100"/>
      <el-table-column :align="'center'" :show-overflow-tooltip="true" label="生产日期" prop="produceDate"
                       width="130">
        <template #default="scope">
          <span>{{ $parseTime(scope.row.produceDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column :align="'center'" :show-overflow-tooltip="true" label="有效期" prop="expireDate"
                       width="130">
        <template #default="scope">
          <span class="ys-css">{{ $parseTime(scope.row.expireDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column :align="'center'" :show-overflow-tooltip="true" fixed="right" label="失效天数"
                       prop="daysOfFailure"
                       width="100px">
        <template #default="scope">
                    <span
                      :style="scope.row.daysOfFailure <= 0 ? 'color:red' : scope.row.daysOfFailure >0 && scope.row.daysOfFailure <=180? 'color:#ff9900' :''">
                        {{ scope.row.daysOfFailure }}</span>
        </template>
      </el-table-column>
      <el-table-column :align="'center'" :show-overflow-tooltip="true" fixed="right" label="提示" prop="daysOfFailure"
                       width="100px">
        <template #default="scope">
                    <span
                      :style="scope.row.daysOfFailure <= 0 ? 'color:red' : scope.row.daysOfFailure >0 && scope.row.daysOfFailure <=180? 'color:#ff9900' :''">
                        {{
                        scope.row.daysOfFailure <= 0 ? '已过期' : scope.row.daysOfFailure > 0 && scope.row.daysOfFailure <= 180 ? '预警' : scope.row.daysOfFailure
                      }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts" setup>

import {useDictStoreHook} from "@/store/modules/dict.ts";
import {listStock} from "@/api/drug/drugStock.ts";
import {useUserStoreHook} from "@/store/modules/user.ts";

const useUserStore = useUserStoreHook();
// 登录用户信息
const userInfo = <UserInfoBusi>useUserStore.user.userInfo
const dictStore = useDictStoreHook();
const dictDataMap = ref(dictStore.isTypeGetData('spec_unit'))

const {proxy} = getCurrentInstance() as any
const currentSelectDept = proxy.$currentSelectDept
// 药品库存表格数据
const stockList = ref([])

const dateRange = ref([])
const queryParamsRef = ref()
const storageIdDeptRef = ref()
const props = defineProps({
  showSearch: {
    type: Boolean,
    default: true
  },
  storageId: {
    type: String,
    default: ""
  },
  adaptiveHeight: {
    type: Number,
    default: 30
  }
})

const queryParams = ref<any>({
  storageId: proxy.$currentSelectDept,
  orgId: userInfo.orgId
})

watch(() => props.storageId, (now, _old) => {
  queryParams.value.storageId = now
  getList()
})

function getList() {
  listStock(proxy.$addDateRange(queryParams.value, dateRange.value)).then((response: any) => {
    stockList.value = response.data.filter((item: any) => item.daysOfFailure <= 180)
    stockList.value.forEach((item: any) => {
      item.quantityMax = Math.floor(item.quantity / item.packageNum)
      item.quantityMin = item.quantity % item.packageNum
    })

  });
}


/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  queryParamsRef.value.resetFields()
  storageIdDeptRef.value.setValue("")
  handleQuery();
}

function storageIdClick(obj) {
  queryParams.value.storageId = obj.storageId
  getList();
}

onMounted(() => {
  if (proxy.$currentSelectDept) {
    nextTick(() => {
      storageIdDeptRef.value.getDrugStorageList()
      getList()
    })
  }
})

defineExpose({
  getList
})
</script>

<script lang="ts">
export default {
  name: "DrugExpire"
}
</script>

<style scoped>
:deep(.el-table__body tr.current-row>td) {
  background-color: #e9e9e9 !important;
  color: #5f5f5f;
}
</style>
